<template>
    <!--个人资料-->
    <div class="flex-box">
        <div class="today-live">
            <div class="title">
                今日直播
            </div>
            <div class="order-list">
                <p class="nodata">
                    您暂时没有预约直播哦，以下是为您推荐的优质直播课程，快去预约哦
                </p>
            </div>
            <ul class="today-live-list">
                <li class="live" v-for="live in liveList" :key="live.id">
                    <p class="time">● {{$util.dateConverter('MM月dd日',live.live_bg_time)}} {{$util.dateConverter('hh:mm',live.live_bg_time)}}</p>
                    <div class="intro-withimg">
                        <div class="img-wrap">
                            <img :src="live.live_fm_pic" alt=""/>
                        </div>
                        <div class="intro-list">
                            <p class="name">{{live.live_name}}</p>
                            <p>{{live.live_desc}}</p>
                            <a class="btn" v-if="live.isYuYue == 2" @click="ajaxOrderLive(live.id)">预约</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="rili-box">
            <div class="intro-lizi">
                <i class="blue"></i>预约直播
                <i class="green"></i>课程直播
            </div>
            <a-locale-provider :locale="locale">
                <a-calendar :fullscreen="false"  @panelChange="onPanelChange" :value="null" :defaultValue="null">
                    <ul slot="dateCellRender" slot-scope="value" class="events">
                        <li v-for="item in getListData(value)" :key="item.content" class="tip">
                           <a class="wyy" v-if="item.ifyy === '未预约'"></a>
                            <a class="yy" v-else></a>
                        </li>
                    </ul>
                </a-calendar>
            </a-locale-provider>
        </div>
    </div>

</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import 'ant-design-vue/dist/antd.css';
export default {
    name: 'userLiveOverview',
    components: {
        /**/
    },
    data() {
        return {
            locale: zhCN,
            liveList: [],
            videoTimeLineList: [],
            dateObj: {}
        };
    },
    watch: {
        /**/
    },
    mounted() {
        this.initLiveList()
        let date = this.$util.dateConverter('yyyy-MM');
        this.ajaxGetLiveList(date)
    },
    methods: {
        // 初始今日直播
        initLiveList(){
            this.$api.ajaxData({
                pathName: 'getTodayLiveList',
                authorization: true,
                data: this.form
            }).then(res =>{
                this.liveList = res.obj;
            }).catch(()=>{
                this.liveList = []
            });
        },
        // 预约
        ajaxOrderLive(id) {
            let option = {
                pathName: 'doLiveYuYue',
                authorization: true,
                params:{
                    'live_id': id,
                    'st_id': this.$api.getAccount().id
                },
            };
            this.$api.ajaxData(option)
                .then(res => {
                    if(res.code === 200) {
                        this.$util.alert('预约成功');
                        this.initLiveList();
                    } else {
                        this.$util.alert(res.data.msg);
                    }
                });
        },
        initFreeLive() {
            // 近期直播
            this.ajaxGetVideoList()
                .then(res => {
                    let timeLine = res.obj.zj;
                    timeLine.sort((a,b) =>{
                        return a.live.live_bg_time - b.live.live_bg_time
                    });
                    let nowTime = new Date().getTime();
                    let tempList = [];
                    timeLine.forEach(item=> {
                        let temp = Object.assign({
                            zt: item.zt
                        },item.live);
                        if (nowTime < temp.live_bg_time) {
                            // 未开始
                            temp.playStatus = 0;
                        } else if(temp.live_bg_time <= nowTime && nowTime <=temp.live_ed_time || !temp.live_ed_time) {
                            // 直播中
                            temp.playStatus = 1;
                        } else {
                            // 直播结束
                            temp.playStatus = -1;
                        }
                        tempList.push(temp);
                    });
                    this.videoTimeLineList= tempList;
                })
        },
        // 获取视频列表
        ajaxGetVideoList() {
            let option = {
                pathName: 'doGetFreeLives',
                authorization: true,
            };
            return this.$api.ajaxData(option);
        },
        onPanelChange(value, mode) {
            if(mode === 'month') {
                let date = this.$util.dateConverter('yyyy-MM',value)
                this.ajaxGetLiveList(date)
            }
        },
        // 获取直播列表
        ajaxGetLiveList(time) {
            let option = {
                pathName: 'doGetLiveInfo',
                authorization: true,
                params: {
                    time: time
                },
                errorFunc: false,
            };
            this.$api.ajaxData(option).then(res=>{
                this.dateObj = {};
                res.obj.forEach(item=>{
                   this.dateObj[this.$util.dateConverter('yyyy-MM-dd',item.v_f_l.live_bg_time)] = item;
                })
            })
        },
        getListData(value) {
            let listData;
            let date = this.$util.dateConverter('yyyy-MM-dd',value);
            if(this.dateObj[date]) {
                listData = [this.dateObj[date]];
            }
            return listData || [];
        },

    }
};
</script>
<style scoped lang="scss">
.flex-box {
    display: flex;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #f7f7f7;
    .today-live {
        flex: 1;
        position: relative;
        .title {
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            font-size: 13px;
            font-weight: bold;
            color: #333;
        }
        .order-list {
            display: flex;
            padding: 0 20px;
            height: 60px;
            line-height: 26px;
            align-items: center;
            font-size: 14px;
            color: #666;
            p {
                margin: 0;
            }
        }
        .today-live-list {
            display: flex;
            padding: 20px 0px 20px 20px;
            .live {
               width: 50%;
                padding: 0 10px 0 0;
                .time {
                    font-weight: bold;
                }
                .intro-withimg {
                    display: flex;
                    align-items: center;
                    .img-wrap {
                        flex-shrink: 0;
                        width: 40%;
                        max-width: 127px;
                        margin-right: 10px;
                        border-radius: 10px;
                        overflow: hidden;
                        img {
                            display: block;
                            width: 100%;
                        }
                    }
                    .intro-list {
                        .name {
                            color: #666;
                        }
                        p {
                            width: 100%;
                            font-size: 13px;
                            margin: 0 0 10px;
                            color: #999;
                            @include ellipsis-line(2)
                        }
                        .btn {
                            display: block;
                            width: 75px;
                            height: 25px;
                            line-height: 23px;
                            border-radius: 13px;
                            text-align: center;
                            color: #006ade;
                            border: 1px solid #006ade;
                        }
                    }
                }

            }
        }
    }
    .rili-box {
        width: 280px;
        border-left: 1px solid #f7f7f7;
        .intro-lizi {
            padding: 0 20px;
            text-align: right;
            i {
                display: inline-block;
                width: 10px;
                height: 10px;
                margin-right: 5px;
                border-radius: 50%;
                opacity: 0.5;
                &.green {
                    background: #149937;
                }
                &.blue {
                    background: #006ade;
                }
            }
        }
    }
}
    .events {
        height: 44px;
        margin-bottom: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tip {
        height: 30px;
    }
    .yy {
        display: block;
        background: #149937;
        width: 30px;
        height: 30px;
        margin: 0 auto;
        opacity: 0.5;
        border-radius: 50%;
    }
    .wyy {
        display: block;
        background: #006ade;
        width: 30px;
        height: 30px;
        margin: 0 auto;
        opacity: 0.5;
        border-radius: 50%;
    }
</style>
